<template>
  <el-card class="box-card">
    <template #header>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="供应商">
          <selectSupplier v-model="formInline.supplierSn" val="supplierSn"></selectSupplier>
        </el-form-item>
        <el-form-item label="货物名称">
          <el-input v-model="formInline.cargoName" placeholder="请输入货物名称" clearable />
        </el-form-item>
        <el-form-item label="工厂">
          <selectFactory v-model="formInline.factoryId"></selectFactory>
        </el-form-item>
        <el-form-item label="仓库">
          <selectStores v-model="formInline.storeId" :factoryId="formInline.factoryId"></selectStores>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查找</el-button>
          <el-button @click="init">重置</el-button>
        </el-form-item>
      </el-form>
    </template>

    <el-table :data="tableData.rows">
      <el-table-column prop="batchNumber" label="批次号" />
      <el-table-column prop="supplierName" label="供应商" />
      <el-table-column prop="cargoSn" label="货物编码" />
      <el-table-column prop="cargoName" label="货物名称" />
      <el-table-column prop="factoryName" label="工厂" />
      <el-table-column prop="storeName" label="仓库" />
      <el-table-column prop="regionName" label="库区" />
      <el-table-column prop="locationSn" label="库位" />
      <el-table-column prop="traySn" label="托盘编码" />
      <el-table-column prop="num" label="库存数量" />
      <el-table-column label="单位">
        <template #default="scope">
          <selectUnit v-model="scope.row.cargoUnit" readonly="1"></selectUnit>
        </template>
      </el-table-column>
      <el-table-column prop="validityDate" label="保质期至" />
      <el-table-column prop="days" label="离过期天数" />
    </el-table>
    <Pagination v-if="tableData['total']" :total="tableData['total']" v-model:page="formInline.pageNum" v-model:limit="formInline.pageSize" @pagination="getInfo" />
  </el-card>
</template>

<script setup lang="ts">
import { onMounted } from "vue";

const { proxy } = getCurrentInstance();
let formInline = ref({
  supplierSn: "",
  factoryId: "",
  storeId: "",
  cargoName: "",
  pageNum: 1,
  pageSize: 10,
});
let tableData = ref({});

onMounted(() => {
  search();
});

let search = () => {
  formInline.value.pageNum = 1;
  getInfo();
};
let getInfo = async () => {
  tableData.value = await proxy.$apis.queryValidityList(formInline.value);
};
let init = () => {
  formInline.value = {
    supplierSn: "",
    factoryId: "",
    storeId: "",
    cargoName: "",
    pageNum: 1,
    pageSize: 10,
  };
  getInfo();
};
</script>

<style lang="scss" scoped>
.box-card {
  margin: 20px;
}
</style>
